<template>
	<el-container>
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item>首页</el-breadcrumb-item>
			<el-breadcrumb-item>批发市场基本信息管理</el-breadcrumb-item>
			<el-breadcrumb-item>商铺摊位申请</el-breadcrumb-item>
		</el-breadcrumb>
		<el-header style="height: auto;">
			<el-form inline>
				<el-form-item label="商铺编号" size="mini">
					<el-input placeholder="商铺编号"></el-input>
				</el-form-item>
				<el-form-item label="商铺面积" size="mini">
					<el-input placeholder="商铺面积"></el-input>
				</el-form-item>
				<el-form-item label="审核状态" size="mini">
					<el-select placeholder="审核状态" value="全部">
						<el-option value="审核中" />
						<el-option value="已审核" />
					</el-select>
				</el-form-item>
				<el-form-item label="申请人姓名" size="mini">
					<el-input placeholder="申请人姓名"></el-input>
				</el-form-item>
				<el-form-item label="联系电话" size="mini">
					<el-input placeholder="联系电话"></el-input>
				</el-form-item>
				<el-form-item label="身份证号" size="mini">
					<el-input placeholder="身份证号"></el-input>
				</el-form-item>
				<el-form-item label="签约期限" size="mini">
					<el-date-picker type="date" placeholder="选择日期">
					</el-date-picker>
				</el-form-item>
				<el-form-item size="mini">
					<el-button icon="el-icon-search" type="primary">查询</el-button>
					<el-button icon="el-icon-refresh">重置</el-button>
				</el-form-item>
			</el-form>
		</el-header>
		<el-main>
			<el-row style="float: right; margin-bottom: 10px;">
				<el-button icon="el-icon-plus" size="mini" type="primary">新增</el-button>
				<el-button icon="el-icon-delete" size="mini" type="danger">删除</el-button>
				<el-button icon="el-icon-download" size="mini" type="warning">导出</el-button>
			</el-row>
			<el-table :cell-style="{ textAlign: 'center' }" :data="tableData"
				:header-cell-style="{ backgroundColor: '#f7f8fa', textAlign: 'center' }" size="mini">
				<el-table-column type="selection" />
				<el-table-column label="序号" prop="id" />
				<el-table-column label="商铺" prop="code" />
				<el-table-column label="商铺面积" prop="area" />
				<el-table-column label="当前状态" prop="status">
					<template slot-scope="scope">
						<div style="width: 100%; display: flex; justify-content: center; align-items: center;">
							<div style="width: 10px; height: 10px; border-radius: 50%; margin-right: 5px;" :style="{
								backgroundColor: scope.row.status ? 'red' : '#57aa4d'
							}"></div>
							<div v-html="scope.row.status ? '使用中' : '空闲中'"></div>
						</div>
					</template>
				</el-table-column>
				<el-table-column label="申请人" prop="responser" />
				<el-table-column label="身份证号" prop="personCode" />
				<el-table-column label="联系电话" prop="tel" />
				<el-table-column label="签约期限" prop="time" />
				<el-table-column label="租金价格" prop="money" />
				<el-table-column label="经营品牌" prop="brand" />
				<el-table-column label="经营范围" prop="zone" />
				<el-table-column label="审核状态" prop="judgeStatus" />
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-button icon="el-icon-edit" title="编辑" type="text"></el-button>
						<el-button icon="el-icon-circle-plus-outline" title="新增" type="text"></el-button>
						<el-button icon="el-icon-delete" style="color: red" title="删除" type="text"></el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination :total="3" layout="total, sizes, prev, pager, next, jumper" />
		</el-main>
	</el-container>
</template>

<script>
export default {
	data() {
		return {
			tableData: [{
				id: '1',
				code: 'II001',
				area: 30,
				status: false,
				responser: '周乐心',
				personCode: '37233019970222465X',
				tel: '19333312231',
				time: '2030/6/12',
				money: '1000',
				brand: '金锣',
				zone: '猪肉',
				judgeStatus: '审核中'
			},
			{
				id: '2',
				code: 'II002',
				area: 20,
				status: true,
				responser: '李赫',
				personCode: '372330199702224651',
				tel: '19113212388',
				time: '2030/6/12',
				money: '2000',
				brand: '雨润',
				zone: '猪肉',
				judgeStatus: '审核中'
			},
			{
				id: '3',
				code: 'II003',
				area: 30,
				status: false,
				responser: '胡小小',
				personCode: '372330199702224652',
				tel: '19533319000',
				time: '2030/6/12',
				money: '3000',
				brand: '六合',
				zone: '鸡肉',
				judgeStatus: '审核完毕'
			}
			]
		}
	}
}
</script>

<style scoped>
.el-breadcrumb {
	margin: 5px;
}

.el-container {
	background-color: #eef3fa;
	height: 100%;
	padding: 10px;
}

/* .el-form-item--mini.el-form-item {
  margin-bottom: 0;
} */
.el-header {
	background-color: white;
	margin: 10px 0;
	padding: 15px 30px;
}

.el-main {
	background-color: white;
}

.el-pagination {
	margin-top: 10px;
	text-align: right;
}
</style>
